<template>
  <x-sub-page :content="'付款申请详情'" @goBack="handleBack">
    <div class="pricing-detail" v-loading="pageLoading">
      <div class="form-components">
        <div class="panl-title">
          <span>基础信息</span>
        </div>
      </div>
      <el-descriptions
        direction="vertical"
        :column="3"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item :label="$t('financialSynergy.payment.applicationNo')">{{
          dataForm.number | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.payment.state')">{{
          selectDictLabel(dictOptions['srm_pay.state'], dataForm.state) | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.payment.openingBankName')">{{
          dataForm.openingBankName | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.payment.openingBankAccount')">{{
          dataForm.openingBankAccount | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.payment.type')">{{
          selectDictLabel(dictOptions['srm_pay.pay_type'], dataForm.payType) | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.payment.payMethod')">{{
          selectDictLabel(dictOptions['payment_method'], dataForm.payMethod) | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.payment.payDate')">{{
          (dataForm.payDate?dataForm.payDate.substring(0,10):dataForm.payDate) | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.payment.payAmount')">{{
          parseFloat(dataForm.payAmount).toFixed(2) | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.payment.actualPaymentDate')">{{
          dataForm.actualPayDate | emptyVal
        }}</el-descriptions-item>
      </el-descriptions>
      <div class="form-components">
        <div class="panl-title">
          <span>付款明细</span>
        </div>
      </div>
      <el-form ref="dataForm" :model="dataForm">
        <x-table
          v-if="type == 'contract'"
          ref="tableCom"
          :isPagination="false"
          :data-source="dataForm.contracts"
          :row-key="'id'"
        >
          <el-table-column
            v-for="(item, index) in columns"
            :key="index"
            :prop="item.prop"
            :fixed="item.fixed"
            :show-overflow-tooltip="true"
            :width="item.width"
            :min-width="item.minWidth || '-'"
            :label="item.label"
            :sortable="'custom'"
          >
            <template #default="scope">
              <x-state-cell
                v-if="item.prop === 'state'"
                :text="selectDictLabel(dictOptions['srm_bill.state'], scope.row[item.prop])"
              />
              <span v-else-if="item.prop === 'payAmount'">{{ parseFloat(scope.row[item.prop]).toFixed(2) }}</span>
              <span v-else-if="item.prop === 'amount'">{{ parseFloat(scope.row[item.prop]).toFixed(2) }}</span>
              <span v-else-if="item.prop === 'contractAmount'">{{ parseFloat(scope.row[item.prop]).toFixed(2) }}</span>
              <span v-else-if="item.prop === 'paidAmount'">{{ parseFloat(scope.row[item.prop]).toFixed(2) }}</span>
              <span v-else-if="item.prop === 'unpaidAmount'">{{ parseFloat(scope.row[item.prop]).toFixed(2) }}</span>
              <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
            </template>
          </el-table-column>
        </x-table>
        <x-table
          v-if="type == 'invoice'"
          ref="tableCom"
          :isPagination="false"
          :data-source="dataForm.invoices"
          :row-key="'id'"
        >
          <el-table-column
            v-for="(item, index) in columnsMeet"
            :key="index"
            :prop="item.prop"
            :fixed="item.fixed"
            :show-overflow-tooltip="true"
            :width="item.width"
            :min-width="item.minWidth || '-'"
            :label="item.label"
            :sortable="'custom'"
          >
            <template #default="scope">
              <x-state-cell
                v-if="item.prop === 'invoiceType'"
                :text="selectDictLabel(dictOptions['srm_invoice.invoice_type'], scope.row[item.prop])"
              />
              <span v-else-if="item.prop === 'payAmount'">{{ parseFloat(scope.row[item.prop]).toFixed(2) }}</span>
              <span v-else-if="item.prop === 'amount'">{{ parseFloat(scope.row[item.prop]).toFixed(2) }}</span>
              <span v-else-if="item.prop === 'contractAmount'">{{ parseFloat(scope.row[item.prop]).toFixed(2) }}</span>
              <span v-else-if="item.prop === 'paidAmount'">{{ parseFloat(scope.row[item.prop]).toFixed(2) }}</span>
              <span v-else-if="item.prop === 'unpaidAmount'">{{ parseFloat(scope.row[item.prop]).toFixed(2) }}</span>
              <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
            </template>
          </el-table-column>
        </x-table>
      </el-form>
    </div>
  </x-sub-page>
</template>

<script>
  import { QueryDictMixin, cloneDeep, selectDictLabel, throttle } from '@package/utils'
  import { detailColumnsAdv, detailColumnsMeet } from '@/modules/financialSynergy/config/paymentApplication.js'
  import { apiGetPayDetail } from '@/modules/financialSynergy/api/paymentApplication.js'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'PaymentApplicationDetail',
    mixins: [QueryDictMixin],
    inject: ['closePages'],
    data() {
      return {
        pageLoading: false,
        columns: detailColumnsAdv,
        columnsMeet: detailColumnsMeet,
        srmDictKeys: [
          'srm_pay.pay_type',
          'payment_method',
          'payment_type',
          'srm_pay.state',
          'srm_pay.details_source',
          'payment_terms',
          'srm_bill.state',
          'srm_invoice.invoice_type'
        ],
        dataForm: {
          contracts: [],
          invoices: []
        },
        isDetail: true,
        type: ''
      }
    },
    watch: {
      dictOptions: {
        handler(val) {},
        deep: true,
        immediate: true
      }
    },
    mounted() {
      const {
        query: { id, type, isDetail }
      } = this.$route
      this.isDetail = isDetail
      this.type = type
      this.initDictConfig()
      this.getInfo(id)
    },
    methods: {
      selectDictLabel,
      // 获取详情
      async getInfo(id) {
        const { data, code } = await apiGetPayDetail(id)
        if (code === EnumApiCode.Success) {
          this.$nextTick(() => {
            this.dataForm = Object.assign(this.dataForm, cloneDeep(data))
          })
        }
      },
      handleBack() {
        this.$router.go(-1)
        this.closePages()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pricing-detail {
    padding: 0 20px;
    overflow: auto;

    .panl-title {
      height: 45px;
      // margin: 0 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ededed;
      margin-bottom: 16px;

      span {
        display: inline-block;
        height: 22px;
        line-height: 22px;
        color: #171c26;
        border-left: 2px solid #4474f6;
        padding-left: 12px;
        font-size: 16px;
        font-weight: 700;
      }
    }

    ::v-deep .title-style {
      color: #707683;
      font-size: 14px;
    }

    ::v-deep .content-style {
      padding-bottom: 20px;
      color: #333;
      font-size: 14px;
    }

    .table-title {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #707683;
      font-weight: normal;
    }

    ::v-deep .el-table .el-table__body tr {
      height: 56px;
    }

    ::v-deep .el-table .cell {
      line-height: 56px;
      height: 56px;
      display: flex;
      align-items: center;
    }

    ::v-deep .el-table__row .el-form-item {
      margin-bottom: 0;
    }

    ::v-deep .el-table__row .el-form-item__error {
      padding-top: 0;
    }

    ::v-deep .el-table__row .el-form-item__content {
      line-height: 32px;
    }
  }
</style>
